<template>
  <div class="login-container">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="80px"
      class="login-form"
    >
      <h2 class="form-title">用户登录</h2>
      <el-form-item label="用户名" prop="UserName">
        <el-input 
          v-model="ruleForm.userName" 
          size="large"
          placeholder="请输入用户名"
        />
      </el-form-item>

      <el-form-item label="密码" prop="Pwd">
        <el-input 
          v-model="ruleForm.pwd" 
          show-password 
          size="large"
          placeholder="请输入密码"
        />
      </el-form-item>

      <el-form-item class="form-actions">
        <el-button 
          type="primary" 
          plain
          @click="submitForm(ruleFormRef)"
          size="large"
          color="#EDA3AF"
        >
          登录
        </el-button>
        <el-button 
          @click="resetForm(ruleFormRef)"
          size="large"
          plain
          color="#ADCBF0"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import {useCounterStore} from '@/stores/counter'
import  Read from '@/http/Readhttp'
const pinia=useCounterStore();
const router=useRouter();
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  userName:'',
  pwd:''
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        Read.post("/api/Users/Login",ruleForm).then(res=>{
             if(res.data.code==200)
        {
          localStorage.setItem("token",res.data.datas.token)
            pinia.account.UserName=res.data.datas.userName
            pinia.account.uid=res.data.datas.uid
            pinia.account.rid=res.data.datas.rid
            pinia.account.departmentId=res.data.datas.departmentId
            pinia.account.names=res.data.datas.names
            ElMessage.success(res.data.msg);
            router.push('/mains')
        }
        else{
            ElMessage.error(res.data.msg);
        }
        })
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>
<style scoped>
.login-container {
  background-image: url('@/assets/4.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  background-color: rgba(255, 255, 255, 1);
  padding: 40px 50px;
  border-radius: 15px;
  width: 500px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}

.el-form-item {
  margin-bottom: 28px;
}

.el-input {
  font-size: 16px;
  height: 48px;
  line-height: 48px;
}

.el-button {
  width: 48%;
  height: 46px;
  font-size: 16px;
}

.form-actions {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
</style>